<template>
	<div style="width: 100%;height: 100%;">
		<div class="drdavtare"><img :src="this.userImg" /></div>
		<div class="drduser" v-if="this.userId">
		  <p class="drduserp1">该活动发起用户：</p>
		  <p class="drduserp2">{{nickname}}</p>
		</div>
	</div>
</template>

<script>
import {getUserName, getUserurl} from 'network/dream.js'
export default {
  data() {
    return {
      nickname:'xx用户',
      userImg:'https://img1.baidu.com/it/u=3229045480,3780302107&fm=26&fmt=auto&gp=0.jpg'
    }
  },
  props:['userId'],
  created() {


  },
  mounted() {
    this.getuser()
  },
  methods:{
    getuser(){
      console.log("看这里")
      console.log(this.userId)
      setTimeout(function(){
        //获取昵称
        getUserName(this.userId).then(res=>{
          if(res.code!=20001){
            this.nickname=res
          }
        }).catch(err=>{})
        //获取头像
        getUserurl(this.userId).then(res=>{
          this.userImg=res.data.url
        }).catch(err=>{})
      }.bind(this),1000)
    }
  }
}
</script>

<style scoped>
  /* 发起人信息 */

  .drdavtare {
    width: 25%;
    height: 70%;
    float: left;
    background-color: white;
    margin-top: 2%;
    margin-left: 5%;
    margin-right: 4%;
  }
  .drdavtare img {
    width: 100%;
    height: 100%;
  }
  .drduser {
    height: 70%;
    float: left;
    margin-top: 2%;
  }
  .drduserp2 {
    display: block;
    height: 30px;
    line-height: 30px;
    width: 135px;
    margin-left: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    word-wrap: break-word;
    font-size: 15px;
    font-weight: 700;
    color: #333;
  }
  .drduserp1 {
    width: 200px;
    display: block;
    height: 26px;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
  }
</style>
